import React from 'react'
import PropTypes from 'prop-types'
// import Search from 'material-ui-icons/Search'

import { withStyles } from 'material-ui/styles'
import CategoryIcon from '../category_icon/index'
import categories from '../../constant/category'

class TopicCategory extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      category: categories,
    }
  }
  componentDidMount() {

  }
  render() {
    const { category } = this.state
    return (
      <div className={this.props.classes.topicCategory}>
        { category.map(item => (
          <CategoryIcon
            Icon={item.icon}
            title={item.title}
            key={item.title}
            url={item.url}
            active={item.tab === this.props.tab}
          />))
        }
      </div>
    )
  }
}
const style = {
  topicCategory: {
    marginBottom: '0.1rem',
  },
}
export default withStyles(style)(TopicCategory)

TopicCategory.propTypes = {
  classes: PropTypes.objectOf(Object),
  tab: PropTypes.string,
}

